<clr-wizard
  #wizard
  [(clrWizardOpen)]="isOpen"
  clrWizardSize="lg"
  [clrWizardPreventNavigation]="processing"
  [clrWizardClosable]="!processing"
  class="wizard"
>
  <clr-wizard-title>Create tasks</clr-wizard-title>
  <clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
  <clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
  <clr-wizard-button [type]="'next'">Next</clr-wizard-button>
  <clr-wizard-button [type]="'finish'">Create tasks</clr-wizard-button>
  <clr-wizard-page>
    <ng-template clrPageTitle>Names</ng-template>
    <form clrForm #formNames="ngForm">
      <clr-input-container>
        <label class="clr-col-md-4"> Names Pattern </label>
        <input
          clrInput
          required
          [(ngModel)]="model.names.value"
          class="clr-col-md-8 clr-col-12"
          name="namesValue"
          #namesValue="ngModel"
        />
      </clr-input-container>

      <clr-select-container>
        <label class="clr-col-md-4"> Min characters </label>
        <select
          clrSelect
          [(ngModel)]="model.names.min"
          class="clr-col-md-8 clr-col-12"
          name="namesMin"
          #namesMin="ngModel"
        >
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
        </select>
      </clr-select-container>
      <clr-select-container>
        <label class="clr-col-md-4"> Max characters </label>
        <select
          clrSelect
          [(ngModel)]="model.names.max"
          class="clr-col-md-8 clr-col-12"
          name="namesMax"
          #namesMax="ngModel"
        >
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
        </select>
      </clr-select-container>
    </form>
  </clr-wizard-page>

  <clr-wizard-page>
    <ng-template clrPageTitle>Descriptions</ng-template>
    <form clrForm #formDescriptions="ngForm">
      <clr-select-container>
        <label class="clr-col-md-4"> Min characters </label>
        <select
          clrSelect
          [(ngModel)]="model.descriptions.min"
          class="clr-col-md-8 clr-col-12"
          name="descriptionsMin"
          #descriptionsMin="ngModel"
        >
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
        </select>
      </clr-select-container>
      <clr-select-container>
        <label class="clr-col-md-4"> Max characters </label>
        <select
          clrSelect
          [(ngModel)]="model.descriptions.max"
          class="clr-col-md-8 clr-col-12"
          name="descriptionsMax"
          #descriptionsMax="ngModel"
        >
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
        </select>
      </clr-select-container>
    </form>
  </clr-wizard-page>

  <clr-wizard-page>
    <ng-template clrPageTitle>DSL</ng-template>

    <form clrForm #formDescriptions="ngForm">
      <clr-select-container>
        <label class="clr-col-md-2"> &nbsp; </label>
        <select
          clrSelect
          (change)="loadDsl()"
          [(ngModel)]="predefineDsl"
          class="clr-col-md-8 clr-col-12"
          name="dslSamples"
          #dslSamples="ngModel"
        >
          <option value="">Predefine DSL</option>
          <option value="1">Simple (timestamp)</option>
          <option value="2">Simple Batch (timestamp-batch)</option>
        </select>
      </clr-select-container>
      <clr-textarea-container>
        <label class="clr-col-md-2"> Definition </label>
        <textarea
          [(ngModel)]="model.dsl.value"
          clrTextarea
          class="clr-col-md-10 clr-col-12"
          name="dslValue"
          #dslValue="ngModel"
        ></textarea>
      </clr-textarea-container>
    </form>
  </clr-wizard-page>

  <clr-wizard-page
    clrWizardPagePreventDefault="true"
    (clrWizardPageOnCommit)="submit()"
    (clrWizardPageOnCancel)="wizard.forceFinish()"
    (clrWizardPagePrevious)="wizard.previous()"
  >
    <ng-template clrPageTitle>
      <span *ngIf="!processing">Options</span>
      <span *ngIf="processing">Processing</span>
    </ng-template>
    <form clrForm #formOptions="ngForm" *ngIf="!processing">
      <clr-select-container>
        <label class="clr-col-md-4"> Number of streams </label>
        <select
          clrSelect
          [(ngModel)]="model.options.count"
          class="clr-col-md-8 clr-col-12"
          name="optionsCount"
          #optionsCount="ngModel"
        >
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
          <option value="500">500</option>
          <option value="1000">1000</option>
        </select>
      </clr-select-container>
      <clr-select-container>
        <label class="clr-col-md-4"> Delay </label>
        <select
          clrSelect
          [(ngModel)]="model.options.delay"
          class="clr-col-md-8 clr-col-12"
          name="optionsDelay"
          #optionsDelay="ngModel"
        >
          <option value="0">No break</option>
          <option value="1">1s</option>
          <option value="2">2s</option>
          <option value="10">10s</option>
        </select>
      </clr-select-container>
      <clr-checkbox-container>
        <label class="clr-col-md-4"> Launch tasks </label>
        <clr-checkbox-wrapper>
          <input
            [(ngModel)]="model.options.launch"
            type="checkbox"
            clrCheckbox
            name="optionsDeploy"
            class="clr-col-md-8 clr-col-12"
          />
        </clr-checkbox-wrapper>
      </clr-checkbox-container>
    </form>
    <ng-container *ngIf="processing">
      <p>{{ step }}/{{ model.options.count }} - Processing...</p>
      <div class="progress labeled">
        <progress [value]="progress" max="100" [attr.data-displayval]="progress + '%'"></progress>
      </div>
    </ng-container>
  </clr-wizard-page>
</clr-wizard>
